<template>
  <div>
    <!-- 轮播图 开始 -->
      <el-carousel height="500px" style="margin: 0 auto; text-align: center;">
        <el-carousel-item v-for="item in bannerList" :key="item.id">
          <a href="#">
            <img :src="item.imageUrl" :alt="item.title" style="height: 100%">
          </a>
        </el-carousel-item>
      </el-carousel>
    <!-- 轮播图 结束 -->

    <div id="aCoursesList">
      <!-- 网校课程 开始 -->
      <div>
        <section class="container">
          <header class="comm-title">
            <h2 class="tac">
              <span class="c-333">热门课程</span>
            </h2>
          </header>

          <div>
            <!--  课程列表  -->
            <article class="comm-course-list">
              <ul class="of" id="bna">
                <!-- 每一个课程 -->
                <li v-for="course in courseList" :key="course.id">
                  <div class="cc-l-wrap">
                    <section class="course-img">
                      <!-- 课程封面 -->
                      <img :src="course.cover" class="img-responsive" :alt="course.title">
                      <!-- 课程播放地址 -->
                      <div class="cc-mask">
                        <a href="#" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
                      </div>
                    </section>
                    <!-- 课程的标题 -->
                    <h3 class="hLh30 txtOf mt10">
                      <a href="#" :title="course.title" v-text="course.title" class="course-title fsize18 c-333"></a>
                    </h3>

                    <!-- 课程的其他信息-->
                    <section class="mt10 hLh20 of">
                      <span class="fr jgTag bg-green" v-if=" course.price == 0">
                        <i class="c-fff fsize12 f-fA">免费</i>
                      </span>
                      <span class="fl jgAttr c-ccc f-fA">
                        <i class="c-999 f-fA">{{course.viewCount}}人学习</i>
                        |
                        <i class="c-999 f-fA">{{course.buyCount}}评论</i>
                      </span>
                    </section>
                  </div>
                </li>

              </ul>
              <div class="clear"></div>
            </article>

            <section class="tac pt20">
              <a href="#" title="全部课程" class="comm-btn c-btn-2">全部课程</a>
            </section>
          </div>

        </section>

        <!--   名师开始   -->
        <section class="container">
          <header class="comm-title">
            <h2 class="tac">
              <span class="c-333">名师大咖</span>
            </h2>
          </header>
          <div>
            <!--   名师列表   -->
            <article class="i-teacher-list">
              <ul class="of">
                <!--   每一个名师   -->
                <li v-for="teacher in teacherList" :key="teacher.id">
                  <section class="i-teach-wrap">
                    <div class="i-teach-pic">
                      <!--   名师头像   -->
                      <a href="/teacher/1" :title="teacher.name">
                        <img :alt="teacher.name" :src="teacher.avatar">
                      </a>
                    </div>
                    <!--   名师姓名   -->
                    <div class="mt10 hLh30 txtOf tac">
                      <a href="/teacher/1" :title="teacher.name" class="fsize18 c-666">{{teacher.name}}</a>
                    </div>
                    <!--   名师简介  -->
                    <div class="hLh30 txtOf tac">
                      <span class="fsize14 c-999"> {{teacher.intro}} </span>
                    </div>
                    <!--   名师资料   -->
                    <div class="mt15 i-q-txt">
                      <p class="c-999 f-fA">
                        {{teacher.career}}
                      </p>
                    </div>
                  </section>
                </li>

              </ul>
              <div class="clear"></div>
            </article>

            <section class="tac pt20">
              <a href="#" title="全部讲师" class="comm-btn c-btn-2">全部讲师</a>
            </section>
          </div>
        </section>
      </div>


    </div>
  </div>
</template>

<script>
  import banner from "../api/banner";
  import index from "../api/index"

  export default {
    data() {
      return {
        bannerList: [],
        courseList:[],
        teacherList:[]
      }
    },
    mounted () {
      this.getDateBanner()
      this.getIndexData()
    },
    methods: {
      // 获取轮播图
      getDateBanner() {
        banner.getListBanner()
          .then(res => {
            this.bannerList = res.data.list
          })
      },
      // 获取课程信息、讲师信息
      getIndexData(){
        index.getData().then(res=>{
            this.courseList = res.data.courseList
            this.teacherList = res.data.teacherList
        })
      }
    }
  }
</script>
